<template>
	<uni-popup ref="popupDialog" type="bottom">
		<view class="popup-bd">
			<view class="popup-title">
				日程提醒
				<uni-icons
					type="closeempty"
					size="50rpx"
					color="#666666"
					class="popup-close"
					@click="close"
				></uni-icons>
			</view>
			<view class="popup-content">
				<view class="pt20 pb20 pl20 pr20">
					<view
						class="item"
						v-for="(item, index) in settings"
						v-bind:key="index"
					>
						<view class="header">
							<text>提醒{{ index + 1 }}</text>
							<view class="delete" @click="deleteItem(index)"
								>删除</view
							>
						</view>
						<view class="body">
							<picker
								@change="
									(e) => {
										bindPickerChange(e, index)
									}
								"
								mode="selector"
								:value="item.time"
								:range="noticeTimeOptions.map((n) => n.label)"
							>
								<view class="formItem">
									<text class="label">
										{{
											noticeTimeOptions.filter(
												(n) => n.value === item.time
											)[0].label
										}}
									</text>
									<view class="right"
										><uni-icons
											type="right"
											size="20"
											color="#999999"
										></uni-icons
									></view>
								</view>
							</picker>
							<view class="formItem">
								<text class="label">提醒方式</text>
								<view class="values">
									<view
										class="value"
										:class="
											opt.value === item.type
												? 'active'
												: ''
										"
										v-for="opt in noticeTypes"
										v-bind:key="opt.value"
										@click="changeType(opt.value, index)"
									>
										{{ opt.label }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="wework-tip" v-if="needAddWework">
					您还
					<text>未添加</text>
					办公助手微信，无法通过微信通知，请点击添加
					<view class="wework-btn" @click="showWeworkCode"
						>办公助手微信</view
					>
				</view>
				<view v-if="this.settings.length < 5">
					<button class="btn ghost-button linear w60" @click="add">
						添加提醒
					</button>
				</view>
			</view>
			<view class="popup-bottom df ac">
				<button
					class="primary-button linear w60"
					:class="needAddWework ? 'disabled' : ''"
					@click="complete"
					:disabled="needAddWework"
				>
					确 定
				</button>
			</view>
		</view>
	</uni-popup>
</template>
<script>
import { noticeTimeOptions, noticeTypes } from '../schedule/config'
import { getTwoDimensionalCode, checkRelation } from '@/apis/calendar'
export default {
	emits: ['complete'],
	data() {
		return {
			noticeTimeOptions,
			noticeTypes,
			needAddWework: false,
			settings: [],
		}
	},
	methods: {
		showWeworkCode() {
			getTwoDimensionalCode().then((res) => {
				const url = res.data
				uni.previewImage({
					current: 1,
					urls: [url],
				})
			})
		},
		open(list) {
			this.settings = list
			this.$refs.popupDialog.open()
			this.check()
		},
		needCheckRelation() {
			let needCheck = false
			this.settings.forEach((item) => {
				if (item.type === 2) {
					needCheck = true
				}
			})
			return needCheck
		},
		check() {
			if (this.needCheckRelation()) {
				return checkRelation({
					partUserIds: [uni.getStorageSync('userId')],
				}).then((res) => {
					if (res.success) {
						// 返回没关联的用户
						this.needAddWework = res.data.length ? true : false
						return res.data
					} else {
						return Promise.reject(res.message)
					}
				})
			} else {
				this.needAddWework = false
				return Promise.resolve([])
			}
		},
		close() {
			this.$refs.popupDialog.close()
		},
		complete() {
			this.check().then((needList) => {
				if (needList.length === 0) {
					this.$emit('complete', { settings: this.settings })
					this.close()
				}
			})
		},
		deleteItem(index) {
			this.settings = this.settings.filter((_, idx) => index !== idx)
			this.check()
		},
		add() {
			this.settings.push({
				time: noticeTimeOptions[2].value,
				type: noticeTypes[1].value,
			})
		},
		changeType(value, index) {
			this.settings[index].type = value
			this.check()
		},
		bindPickerChange(event, index) {
			const { value } = event.detail
			this.settings[index].time = noticeTimeOptions[Number(value)].value
		},
	},
}
</script>
<style lang="scss" scoped>
.wework-tip {
	font-size: 24rpx;
	line-height: 1.5;
	padding: 20rpx;
	text {
		color: #db0000;
	}
	.wework-btn {
		color: $primary-color;
		text-decoration: underline;
	}
}
.item {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
	margin-bottom: 20rpx;
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		text {
			color: #999999;
		}
		.delete {
			color: #db0000;
			text-decoration: underline;
		}
	}
	.body {
		.formItem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 30rpx;
			padding: 10rpx 20rpx;
			background: #fff;
			border: 1px solid #eee;
			margin-bottom: 30rpx;
			.label {
				color: #999;
			}
			.values {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.value {
					line-height: 40rpx;
					border: 1px solid #e9e9e9;
					padding: 0 20rpx;
					font-size: 28rpx;
					border-left-width: 0;
					&:first-child {
						border-radius: 6rpx 0 0 6rpx;
						border-left-width: 1rpx;
					}
					&:last-child {
						border-radius: 0 6rpx 6rpx 0;
					}
				}
				.active,
				.active-0 {
					background: $primary-color;
					border-color: $primary-color;
					color: #fff !important;
				}
				.active-1 {
					background: #eeb571;
					border-color: #eeb571;
					color: #fff !important;
				}
				.active-2 {
					background: #d6837c;
					border-color: #d6837c;
					color: #fff !important;
				}
			}
			.right {
				display: flex;
				align-items: center;
			}
		}
	}
}
.popup-title {
	background: linear-gradient(90deg, #e3edff 0%, rgba(223, 234, 255, 0) 100%);
}
</style>
